<template>
  <TableView class="table">
    <template #form>
      <NSpace justify="space-between">
        <NSpace align="center">
          标题:
          <NInput style="width: 200rem" placeholder="请输入标题" v-model:value="paginationReactive.title" clearable />
          类型:
          <NSelect :options="parentCodeList" placeholder="请选择类型" clearable style="width: 200rem" label-field="dicName"
            value-field="dicCode" v-model:value="paginationReactive.type" />
          状态:
          <NSelect :options="[
            { label: '未读', value: '0' },
            { label: '已读', value: '1' }
          ]" placeholder="请选择状态" clearable style="width: 200rem" v-model:value="paginationReactive.receiveStatus" />
          申请时间:
          <NDatePicker input-readonly style="width: 300rem" placeholder="请选择申请时间" v-model:formatted-value="range"
            clearable type="daterange" />
          <NButton type="primary" style="width: 78rem" ghost @click="searchTable">
            查询
          </NButton>
        </NSpace>
      </NSpace>
    </template>

    <template #table="props">
      <NDataTable v-bind="props" :bordered="false" :columns="columns" :data="tableData" :pagination="false"
        :loading="tableLoading" />
    </template>

    <template #pagination>
      <NPagination :page-sizes="paginationReactive.pageSizes" :item-count="paginationReactive.itemCount"
        :page="paginationReactive.page" :page-size="paginationReactive.pageSize"
        @update:page="paginationReactive.onChange" @update:page-size="paginationReactive.onUpdatePageSize"
        show-size-picker show-quick-jumper :suffix="() => '页'">
        <template #prefix>
          <span style="font-size: 14px;"> 共{{ paginationReactive.itemCount }}条</span>
        </template>
      </NPagination>
    </template>
  </TableView>
</template>
<script setup lang="ts">
import { h, reactive, onMounted, ref, watch, onDeactivated } from 'vue'
import {
  NSpace,
  NInput,
  NButton,
  NDataTable,
  NPagination,
  NSelect,
  useMessage,
  NDatePicker
} from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'
import TableView from '@/components/TableView.vue'
import router from '@/router'
import { sendRequest } from '@/utils/api'
import type { HttpResponse } from '@/utils/http'
import type { UserModel } from '@/api/userCenter'
import { useRoute } from 'vue-router'
import { useViewerStore } from '@/views/OA/Common/store'
import { RecordType } from '@/router/utils'

const useStore = useViewerStore()
const message = useMessage()
const route = useRoute()

const columns: DataTableColumns = [
  {
    title: '标题',
    key: 'title',
    width: 100,
    align: useStore.isCenter
  },
  {
    title: '类型',
    key: 'type',
    width: 60,
    render({ type }) {
      return parentCodeList.value?.find((it: any) => it.dicCode == type)?.dicName
    },
    align: useStore.isCenter
  },
  {
    title: '申请人部门',
    key: 'department',
    width: 60,
    align: useStore.isCenter
  },
  {
    title: '申请人',
    key: 'publisher',
    width: 60,
    align: useStore.isCenter
  },
  {
    title: '申请时间',
    key: 'updatedTime',
    width: 100,
    align: useStore.isCenter
  },
  {
    title: '状态',
    key: 'receiveStatus',
    width: 60,
    render({ receiveStatus }) {
      return receiveStatus == '1' ? '已读' : '未读'
    },
    align: useStore.isCenter
  },
  {
    title: '操作',
    key: 'action',
    align: useStore.isCenter,
    width: 60,
    fixed: 'right',
    render: (row: any) => [
      h(
        NButton,
        {
          type: 'primary',
          quaternary: true,
          onClick: () => {
            RecordType.setRouteNameTypeFalse(row.code)
            router.push({
              path: '/OA/ReceiveOrDispatch/ReceiveInfo',
              query: { id: row.postId, receiveId: row.receiveId }
            })
          }
        },
        {
          default: () => '详情'
        }
      )
    ]
  }
]
// 上一页下一页
const paginationReactive = reactive({
  page: 1,
  pageSize: 10,
  pageSizes: [10, 20, 50, 100, 500],
  itemCount: 50,
  title: null, //标题
  type: null, //类型
  startTime: null, //开始时间
  endTime: null, //结束时间
  receiveStatus: null,//状态
  onChange: (page: number) => {
    paginationReactive.page = page
    getReceiveList()
  },
  onUpdatePageSize: (pageSize: number) => {
    paginationReactive.pageSize = pageSize
    paginationReactive.page = 1
    getReceiveList()
  }
})
// 获取列表
const tableData = ref([])
const tableLoading = ref(false)
const getReceiveList = async () => {
  tableLoading.value = true
  const [error, res] = await sendRequest<HttpResponse<UserModel>>({
    module: 'userCenter',
    api: 'receiveList',
    override: {
      params: {
        page: paginationReactive.page,
        limit: paginationReactive.pageSize,
        title: paginationReactive.title,
        type: paginationReactive.type,
        startTime: paginationReactive.startTime,
        endTime: paginationReactive.endTime,
        receiveStatus: paginationReactive.receiveStatus
      }
    }
  })
  tableLoading.value = false
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  tableData.value = res.data.list
  paginationReactive.itemCount = res.data.totalCount
}
// 类型
const parentCodeList: any = ref()
const getParentCode = async () => {
  const [error, res] = await sendRequest<HttpResponse<UserModel>>({
    module: 'userCenter',
    api: 'parentCode',
    override: {
      params: {
        dicCode: 'A02'
      }
    }
  })
  if (error) return
  if (res.code !== 0) return
  parentCodeList.value = res.data
}
// 查询
const range: any = ref()
const searchTable = () => {
  paginationReactive.page = 1
  paginationReactive.startTime = range.value ? range.value[0] : null
  paginationReactive.endTime = range.value ? range.value[1] : null
  getReceiveList()
}
//获取需要跳转的路由
const jumpRouterList: any = ref([])
const getJumpRouterList = async () => {
  const [error, res] = await sendRequest<HttpResponse>({
    module: 'userCenter',
    api: 'getJumpRoute'
  })
  if (error) return message.error(error.message)
  jumpRouterList.value = res.data
}


onMounted(async () => {
  getJumpRouterList()
  await getParentCode()
})

const keyUpDown = (e: any) => e.key == 'Enter' && (paginationReactive.page = 1,getReceiveList())
onDeactivated(() => window.removeEventListener('keyup', keyUpDown, false))

watch(
  () => route,
  () => {
    if (route.path == '/OA/UserCenter/Receive') {
      getReceiveList()
      window.addEventListener('keyup', keyUpDown, false)  // 回车
    }
  },
  { deep: true, immediate: true }
)
</script>
<style scoped lang="scss">
.table_pad {
  padding: 10px 20px 15px;
}

.table {
  padding: 29rem 30rem 42rem;
}
</style>
